<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>centerinstall</title>
    <style>
        #firstheader {
            height: 100px;
        }


        /* 左边 */
        #left {
            margin-left: 200px;
            float: left;
        }

        #left ul {
            list-style: none;
        }

        #left a {
            text-decoration: none;
            font-size: 16px;
        }

        #left li {
            width: 200px;
            height: 40PX;
            /* border: 1px solid red; */
            text-align: center;
        }

        #left li:hover {
            background-color: #ccc;

        }

        #left a:hover {
            color: black;
        }

        /* 右边 */
        #right {
            border: 1px solid #ccc;
            width: 600px;
            height: 1000px;
            float: left;
            margin-left: 20px;
        }

        #right-first {
            border: 1px solid #E2E2E2;
            width: 600px;
            height: 100px;
        }

        #characters1 {
            margin-top: 55px;
            margin-left: 35px;
            font-size: 20px;
        }

     
     


        #forth {
            /* border: 1px solid red; */
            height: 200px;
            margin-top: 1050px;
            background-color: black;
        }

        #forth-left {
            width: 300px;
            /* border: 1px solid blue; */
            margin-left: 150px;
            padding: 50px;
            float: left;
        }

        #forth-left-p {
            font-size: 30px;
            color: blue;

        }

        #forth-middle {
            width: 600px;
            /* border: 1px solid black; */

            float: left;
        }

        #forth-middle li {
            list-style: none;

        }

        #forth-middle ul {
            padding: 0;
        }

        #forth-middle a {
            text-decoration: none;
            color: white;
            display: block;
        }

        #forth-middle>ul {
            padding: 35px;
            float: left;
        }

        #forth-right {

            width: 400px;
            /* border: 1px solid red; */
            float: left;
        }
    </style>

    <!-- 引入bootstrap框架的样式文件 -->
    <link rel="stylesheet" href="../../plugins/bootstrap/css/bootstrap.css" type="text/css">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="../../plugins/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../../plugins/css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link href="../../plugins/css/animate.css" rel="stylesheet">
    <link href="../../plugins/css/style.css?v=4.1.0" rel="stylesheet">
</head>

<body>

    <!-- 第一层导航栏 -->
    <div id="firstheader">

    </div>

    <!-- 第二层导航栏 -->

    <!-- 第三层信息填写 -->
    <div>
        <!-- 左边 -->
        <div id="left">
                <ul>
                    <li><a href="javascript:go5()">实名认证</a></li>
                    <li><a href="javascript:go1()">服务记录</a></li>
                    <li><a href="javascript:go2()">手机绑定</a></li>
                    <li><a href="javascript:go3()">地址管理</a></li>
                    <li><a href="javascript:go4()">密码管理</a></li>
                </ul>
            </div>
        <!-- 右边 -->
        <div id="right">
            <!-- 右边第一层 -->
            <div id="right-first">
                <h4 id="characters1">服务记录</h4>
            </div>

            <div class="col-sm-12">
                <div class="ibox">
                    <div class="ibox-content">
                        <h3>未完成</h3>
                        <ul class="sortable-list connectList agile-list">
                            <li class="success-element">
                                按时接送孩子上下学
                                <div class="agile-detail">
                                    <a href="#" class="pull-right btn btn-xs btn-white">标签</a>
                                    <i class="fa fa-clock-o"></i> 2019.09.01
                                </div>
                            </li>
                            <li class="success-element">
                                帮老人打扫卫生
                                <div class="agile-detail">
                                    <a href="#" class="pull-right btn btn-xs btn-white">标记</a>
                                    <i class="fa fa-clock-o"></i> 2019.05.12
                                </div>
                            </li>
                            <li class="warning-element">
                                帮上班族买饮料
                                <div class="agile-detail">
                                    <a href="#" class="pull-right btn btn-xs btn-white">标记</a>
                                    <i class="fa fa-clock-o"></i> 2019.09.10
                                </div>
                            </li>
                            <li class="warning-element">
                                陪老人下象棋
                                <div class="agile-detail">
                                    <a href="#" class="pull-right btn btn-xs btn-white">标签</a>
                                    <i class="fa fa-clock-o"></i> 2019.09.09
                                </div>
                            </li>
                            <li class="info-element">
                                陪小孩打篮球
                                <div class="agile-detail">
                                    <a href="#" class="pull-right btn btn-xs btn-primary">确定</a>
                                    <i class="fa fa-clock-o"></i> 2019.08.04
                                </div>
                            </li>
                           
                        </ul>

                        <h3>已完成</h3>
                        <ul class="sortable-list connectList agile-list">
                            <li class="info-element">
                                按时接送孩子上下学
                                <div class="agile-detail">
                                    <a href="#" class="pull-right btn btn-xs btn-white">标记</a>
                                    <i class="fa fa-clock-o"></i> 2019.09.10
                                </div>
                            </li>
                            <li class="warning-element">
                                帮老人打扫卫生
                                <div class="agile-detail">
                                    <a href="#" class="pull-right btn btn-xs btn-white">标签</a>
                                    <i class="fa fa-clock-o"></i> 2019.09.09
                                </div>
                            </li>
                            <li class="warning-element">
                                帮上班族买饮料
                                <div class="agile-detail">
                                    <a href="#" class="pull-right btn btn-xs btn-white">标签</a>
                                    <i class="fa fa-clock-o"></i> 2019.09.09
                                </div>
                            </li>
                            <li class="warning-element">
                                陪老人下象棋
                                <div class="agile-detail">
                                    <a href="#" class="pull-right btn btn-xs btn-primary">确定</a>
                                    <i class="fa fa-clock-o"></i> 2019.08.04
                                </div>
                            </li>
                            <li class="success-element">
                                陪小孩打篮球
                                <div class="agile-detail">
                                    <a href="#" class="pull-right btn btn-xs btn-white">标记</a>
                                    <i class="fa fa-clock-o"></i> 2019.05.12
                                </div>
                            </li>

                        </ul>
                    </div>
                </div>
            </div>


        </div>
    </div>
    <!-- 第四层 -->
    <div id="forth">
        <!-- 左边 -->
        <div id="forth-left">
            <h5 style="color: #ccc">闲时网客服热线</h5>
            <p id="forth-left-p">400-180-8321</p>
            <p style="color: white">每天09: 00~21: 00</p>
        </div>
        <!-- 中间 -->
        <div id="forth-middle">
            <ul>
                <li style="color: #ccc">闲时网
                    <ul>
                        <li style="margin-top: 20px"><a href="#">关于我们</a></li>
                        <li style="margin-top: 12px"><a href="#">联系我们</a></li>
                        <li style="margin-top: 12px"><a href="#">加入我们</a></li>
                    </ul>
                </li>
            </ul>
            <ul>
                <li style="color: #ccc">帮助中心
                    <ul>
                        <li style="margin-top: 20px"><a href="#">交易规则</a></li>
                        <li style="margin-top: 12px"><a href="#">法律声明</a></li>
                        <li style="margin-top: 12px"><a href="#">常见问题</a></li>
                    </ul>
                </li>
            </ul>
            <ul>
                <li style="color: #ccc">我是需求方
                    <ul>
                        <li style="margin-top: 20px"><a href="#">发布需求</a></li>
                        <li style="margin-top: 12px"><a href="#">要选服务对象</a></li>
                        <li style="margin-top: 12px"><a href="#">需求方入门</a></li>
                    </ul>
                </li>
            </ul>
            <ul>
                <li style="color: #ccc">我是服务方
                    <ul>
                        <li style="margin-top: 20px"><a href="#">服务方入驻</a></li>
                        <li style="margin-top: 12px"><a href="#">浏览全部需求</a></li>
                        <li style="margin-top: 12px"><a href="#">服务方入门</a></li>
                    </ul>
                </li>
            </ul>
        </div>

        <!-- 右边  -->
        <div id="forth-right">
            <p style="margin-top: 30px;color: #ccc">联系关注我们呗</p>
            <p style="margin-top: 20px"><a href="#"><img src="../../imgs/QQ图片20190913162259.png" alt="图片加载失败!"></a>
                <a href="#"><img src="../../imgs/QQ图片20190913162435.png" alt="图片加载失败!"></a>
                <a href="#"><img src="../../imgs/QQ图片20190913162519.png" alt="图片加载失败!"></a>
                <a href="#"><img src="../../imgs/QQ图片20190913162606.png" alt="图片加载失败!"></a>
            </p>
        </div>
    </div>


    <script>
            function go1() {
                window.location.href = 'centerRecord.html';
            }
    
            function go2() {
                window.location.href = 'centerNumber.html';
            }
    
            function go3() {
                    window.location.href = 'centerAddress.html';
                }
    
            function go4() {
                    window.location.href = 'centerPassword.html';
                }
                function go5() {
                    window.location.href = 'centerEdit.html';
                }
        </script>


      <!-- 全局js -->
      <script src="js/jquery.min.js?v=2.1.4"></script>
      <script src="js/bootstrap.min.js?v=3.3.6"></script>
      <script src="js/jquery-ui-1.10.4.min.js"></script>
  
      <!-- 自定义js -->
      <script src="js/content.js?v=1.0.0"></script>
  
      <script>
          $(document).ready(function () {
              $(".sortable-list").sortable({
                  connectWith: ".connectList"
              }).disableSelection();
  
          });
      </script>
  
      <script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
      <!--统计代码，可删除-->
  

    <!-- bootstrap中的js插件依赖于jquery框架,所以必须先引入jquery的js文件 -->
    <script src="../../plugins/jquery/jquery.min.js"></script>
    <!--引入bootstrap的js文件-->
    <script src="../../plugins/bootstrap/js/bootstrap.js"></script>
</body>

</html>